// 亮色主题变量
/**
   [data-theme='light'] 是一个 css选择器
   作用是选中 HTML 中所有具有 data-theme 属性，并且该属性值等于 'light' 的元素
   比如 <div data-theme="light">亮色主题容器</div> 这种写法主要用于实现 主题切换系统

   使用：
   在HTML根元素上设置这个属性
   <html data-theme="light">
   然后用js动态实现
   document.documentElement.setAttribute('data-theme', 'dark');

   一组 CSS 变量（如 --primary-bg、--link-color）
   它们只在 data-theme="light" 的上下文中生效
   你可以通过 var(--primary-bg) 在其他样式中引用这些变量，从而实现动态主题切换。
 */
[data-theme='light'] {
  --primary-bg: #ffffff;
  --secondary-bg: #f5f5f5;
  --primary-text: #000000;
  --secondary-text: #666666;
  --border-color: #e8e8e8;
  --header-bg: #fff;
  --sider-bg: #001f3f;
  --card-bg: #ffffff;
  --hover-bg: #f0f0f0;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --link-color: #1890ff;
  --link-hover-color: #40a9ff;
  --success-color: #52c41a;
  --warning-color: #faad14;
  --error-color: #f5222d;
  --heading-color: #262626;
  --disabled-color: #00000040;
  --disabled-bg: #f5f5f5;
  --menu-item-hover: rgba(24, 144, 255, 0.1);
  --menu-item-active: rgba(24, 144, 255, 0.15);
  --menu-text: rgba(255, 255, 255, 0.85);
  --menu-text-hover: #40a9ff;
}

// 暗色主题变量
[data-theme='dark'] {
  --primary-bg: #1f1f1f;
  --secondary-bg: #141414;
  --primary-text: #ffffff;
  --secondary-text: #b0b0b0;
  --border-color: #434343;
  --header-bg: #141414;
  --sider-bg: #141a2b;
  --card-bg: #262626;
  --hover-bg: #1f1f1f;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --link-color: #177ddc;
  --link-hover-color: #1890ff;
  --success-color: #49aa19;
  --warning-color: #d89614;
  --error-color: #d32029;
  --heading-color: #ffffff;
  --disabled-color: #ffffff40;
  --disabled-bg: #262626;
  --menu-item-hover: rgba(24, 144, 255, 0.15);
  --menu-item-active: rgba(24, 144, 255, 0.2);
  --menu-text: rgba(255, 255, 255, 0.65);
  --menu-text-hover: #177ddc;
}

// 全局样式
body {
  background-color: var(--primary-bg);
  color: var(--primary-text);
  transition: all 0.3s;
}

// 卡片样式
.ant-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  transition: all 0.3s;
  
  .ant-card-head {
    border-bottom-color: var(--border-color);
    color: var(--heading-color);
  }

  .ant-card-meta-title {
    color: var(--heading-color);
  }

  .ant-card-meta-description {
    color: var(--secondary-text);
  }
}

// 菜单样式
.ant-menu {
  background-color: var(--sider-bg);
  border-right-color: var(--border-color);
  
  &.ant-menu-dark {
    background-color: var(--sider-bg);
    
    .ant-menu-item {
      color: var(--menu-text);
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--link-color);
        transform: scaleY(0);
        transition: transform 0.3s;
      }

      &:hover {
        color: var(--menu-text-hover);
        background-color: var(--menu-item-hover) !important;
      }

      &.ant-menu-item-selected {
        color: var(--menu-text-hover);
        background-color: var(--menu-item-active);
        
        &::after {
          transform: scaleY(1);
        }
      }
      
      .anticon {
        color: var(--menu-text);
        transition: color 0.3s;
      }
      
      &:hover .anticon,
      &.ant-menu-item-selected .anticon {
        color: var(--menu-text-hover);
      }
    }
    
    .ant-menu-submenu-title {
      color: var(--menu-text);
      
      &:hover {
        color: var(--menu-text-hover);
      }
      
      .anticon {
        color: var(--menu-text);
        transition: color 0.3s;
      }
      
      &:hover .anticon {
        color: var(--menu-text-hover);
      }
    }
  }
  
  .ant-menu-item {
    color: var(--secondary-text);
    transition: all 0.3s;
    
    &:hover {
      color: var(--link-color);
      background-color: var(--hover-bg);
    }
    
    &.ant-menu-item-selected {
      color: var(--link-color);
      background-color: var(--hover-bg);
    }
  }
}

// 按钮样式
.ant-btn {
  &-text {
    color: var(--primary-text);
    
    &:hover {
      color: var(--link-color);
      background-color: var(--hover-bg);
    }
  }

  &-primary {
    background-color: var(--link-color);
    border-color: var(--link-color);

    &:hover {
      background-color: var(--link-hover-color);
      border-color: var(--link-hover-color);
    }
  }

  &-link {
    color: var(--link-color);

    &:hover {
      color: var(--link-hover-color);
    }
  }

  &[disabled] {
    color: var(--disabled-color) !important;
    background-color: var(--disabled-bg) !important;
    border-color: var(--border-color) !important;
  }
}

// 输入框样式
.ant-input {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--primary-text);
  transition: all 0.3s;
  
  &:hover {
    border-color: var(--link-hover-color);
  }

  &:focus {
    border-color: var(--link-color);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }

  &::placeholder {
    color: var(--secondary-text);
  }
}

// 表格样式
.ant-table {
  background-color: var(--card-bg);
  color: var(--primary-text);
  
  .ant-table-thead > tr > th {
    background-color: var(--secondary-bg);
    color: var(--heading-color);
    border-bottom-color: var(--border-color);
  }
  
  .ant-table-tbody > tr > td {
    border-bottom-color: var(--border-color);
    transition: all 0.3s;
  }
  
  .ant-table-tbody > tr:hover > td {
    background-color: var(--hover-bg);
  }

  .ant-table-row-expand-icon {
    border-color: var(--border-color);
    color: var(--primary-text);
  }
}

// 下拉菜单样式
.ant-dropdown-menu {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: var(--shadow);
  
  .ant-dropdown-menu-item {
    color: var(--primary-text);
    transition: all 0.3s;
    
    &:hover {
      color: var(--link-color);
      background-color: var(--hover-bg);
    }
  }
}

// 模态框样式
.ant-modal {
  .ant-modal-content {
    background-color: var(--card-bg);
    box-shadow: var(--shadow);
    
    .ant-modal-header {
      background-color: var(--card-bg);
      border-bottom-color: var(--border-color);

      .ant-modal-title {
        color: var(--heading-color);
      }
    }
    
    .ant-modal-body {
      color: var(--primary-text);
    }

    .ant-modal-footer {
      border-top-color: var(--border-color);
    }
  }

  .ant-modal-close {
    color: var(--secondary-text);

    &:hover {
      color: var(--primary-text);
    }
  }
}

// 面包屑样式
.ant-breadcrumb {
  color: var(--secondary-text);
  
  a {
    color: var(--secondary-text);
    transition: all 0.3s;
    
    &:hover {
      color: var(--link-color);
    }
  }

  .ant-breadcrumb-separator {
    color: var(--secondary-text);
  }
}

// 标签页样式
.ant-tabs {
  color: var(--primary-text);

  .ant-tabs-tab {
    color: var(--secondary-text);

    &:hover {
      color: var(--link-color);
    }

    &.ant-tabs-tab-active .ant-tabs-tab-btn {
      color: var(--link-color);
    }
  }

  .ant-tabs-ink-bar {
    background-color: var(--link-color);
  }
}

// 分页样式
.ant-pagination {
  color: var(--primary-text);

  .ant-pagination-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);

    a {
      color: var(--primary-text);
    }

    &:hover {
      border-color: var(--link-color);
      
      a {
        color: var(--link-color);
      }
    }

    &-active {
      border-color: var(--link-color);
      
      a {
        color: var(--link-color);
      }
    }
  }

  .ant-pagination-prev,
  .ant-pagination-next {
    button {
      background-color: var(--card-bg);
      border-color: var(--border-color);
      color: var(--primary-text);

      &:hover {
        border-color: var(--link-color);
        color: var(--link-color);
      }
    }
  }
} 